<template>
	<div class="right-chart-box">
		<div id="rightChart"></div>
	</div>
</template>

<script setup>
import { ref, reactive } from "vue";
import echarts from "@/common/utils/echarts.js";

// 图例组件图
const mark1 = require("@/assets/screenImg/propertyImg/pointLine.png");
const mark2 = require("@/assets/screenImg/leaderImg/pointLine.png");
let timeArr = ref([
	"部门1",
	"部门2",
	"部门3",
	"部门4",
	"部门5",
	"部门6",
	"部门7",
	"部门8",
]);
//  实际数据
let dataArr1 = ref([10, 20, 30, 40, 50, 60, 70, 80]);
//  预算数据
let dataArr2 = ref([15, 25, 35, 45, 55, 65, 75, 85]);
let pointData = ref([]);
pointData.value = dataArr1.value.map((obj, index) => {
	return {
		coord: [index, obj],
		// symbolSize: [20, item * 2],
		// symbolOffset: [0, item],
	};
});

let options = reactive({
	legend: {
		// 图例组件
		data: [
			{
				name: "实际",
				icon: `image://${mark1}`,
				textStyle: {
					color: "#D3E3FF",
				},
				itemStyle: {
					opacity: 1,
				},
			},
			{
				name: "预算",
				textStyle: {
					color: "#D3E3FF",
				},
				itemStyle: {
					opacity: 0,
				},
				lineStyle: {
					type: "solid",
					color: "#00C6FF",
					width: 2,
				},
			},
		],
	},
	tooltip: {
		trigger: "axis",
		axisPointer: {
			type: "none",
		},
		className: "tooltipBox",
		// position: ["0%", "20%"],
		backgroundColor: "transparent",
		textStyle: {
			color: "#ffffff",
		},
		padding: [5, 10, 10, 10],
		borderWidth: 0,
		formatter: (params) => {
			let res = `<span>${params[0].axisValueLabel}</span>`;
			let value1 = params[0].value;
			let value2 = params[1].value;
			let diffValue = (value1 - value2).toFixed(2);
			if (diffValue > 0) {
				diffValue = "+" + diffValue;
			}
			for (let i = 0; i < params.length; i++) {
				res += `<br />
				<span>${params[i].seriesName}：</span>
				<span style="color:#FFDA3A">${params[i].value}万元</span>`;
			}
			res += `<br /><span>差额：</span><span style="color:#FFDA3A">${diffValue}万元</span>`;
			return res;
		},
	},
	grid: {
		right: "5%", //grid 组件离容器右侧的距离
		bottom: "15%",
	},
	xAxis: {
		type: "category",
		data: timeArr.value,
		// name: "单位（月）",
		// // 坐标轴名称
		// nameTextStyle: {
		// 	color: "#D3E3FF",
		// 	padding: [0, 50, 0, 0],
		// },
		//刻度
		axisTick: {
			show: false,
		},
		// 轴线
		axisLine: {
			show: false,
		},
		// 刻度标签
		axisLabel: {
			color: "#D3E3FF",
			interval: 0,
		},
	},
	yAxis: [
		{
			type: "value",
			name: "单位（万元）",
			axisLabel: {
				color: "#D3E3FF",
			},
			nameTextStyle: {
				color: "#D3E3FF",
			},
			// 分隔线
			splitLine: {
				lineStyle: {
					color: "#D3E3FF",
				},
			},
		},
	],
	series: [
		{
			name: "实际",
			data: dataArr1.value,
			type: "line",
			lineStyle: {
				// 设置线条颜色
				width: 0,
				color: "#00C6FF",
			},
			itemStyle: {
				// 设置线条上点的颜色
				color: "#00D3FD",
				opacity: 0,
			},
			markPoint: {
				symbol: `image://${mark2}`,
				symbolKeepAspect: true,
				data: pointData,
				symbolSize: [10, 89],
				symbolOffset: [1, 38],
			},
		},
		{
			name: "预算",
			data: dataArr2.value,
			type: "line",
			lineStyle: {
				color: "#00C6FF", //折线的颜色
			},
			showSymbol: false,
			// symbol: "none", //取消标记图形
		},
	],
});
let incomeChart = null;
let initIncomeChartData = async (p1, p2, p3) => {
	timeArr.value.splice(0);
	timeArr.value.push(...p1);
	dataArr1.value.splice(0);
	dataArr1.value.push(...p2);
	dataArr2.value.splice(0);
	dataArr2.value.push(...p3);
	incomeChart.setOption(options);
};
const initChart = (p1, p2, p3) => {
	// 初始化echarts实例
	if (!incomeChart)
		incomeChart = echarts.init(document.getElementById("rightChart"));
	initIncomeChartData(p1, p2, p3);
};
defineExpose({
	initChart,
});
</script>
<style lang="scss" scoped>
.right-chart-box {
	width: 100%;
	height: 100%;
	#rightChart {
		width: 100%;
		height: 100%;
	}
}
:deep(.tooltipBox) {
	background: url("@/assets/screenImg/propertyImg/tooltipBg.png") no-repeat;
	background-size: 100% 100%;
}
</style>
